﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ContentPlaceHolderID="title" runat="server">
   Hello Webloop!
</asp:Content>

<asp:Content ContentPlaceHolderID="body" runat="server">

   <h2>Hello Webloop!</h2>

   <p>
      Your age in dog years:
      <input type="text" id="txtDogYears" />
      <a id="lnkLookup" href="#lookupDogYears">lookup</a>
   </p>

   <div id="pnlDogYearDialog">

      <div id="pnlLoading" style="text-align: center">
         <img src="../../Content/images/ajax-loader.gif" alt="loading" />
      </div>

   </div>

</asp:Content>

<asp:Content ContentPlaceHolderID="scripts" runat="server">

   <% if (false) { %>
      <script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.8.2.min.js" type="text/javascript"></script>
      <script src="../../Scripts/Site.js" type="text/javascript"></script>
   <% } %>

   <script type="text/javascript">

      $(function () { InitializeDogYearsLookup(); });

      /**********************************************************/
      /**********************************************************/

      function InitializeDogYearsLookup() {

         $('#lnkLookup').click(function (e) {
            e.preventDefault();
            $('#pnlDogYearDialog').dialog('open');
         });

         $('#pnlDogYearDialog').dialog({
            title: 'Dog Years',
            modal: true,
            autoOpen: false,
            overlay: { opacity: 0.5, background: 'black' },
            open: pnlDogYearDialog_Open,
            buttons: { 'OK': pnlDogYearDialog_OK }
         });

         function pnlDogYearDialog_Open() {
            var pnlDogYearDialog = $('#pnlDogYearDialog');
            if (pnlDogYearDialog.attr('loaded') == 'true')
               return;

            pnlDogYearDialog.attr('loaded', 'true');

            setTimeout(
               function () {
                  $('#pnlLoading').remove();

                  var select = $('<select>')
                     .attr('id', 'ddlDogYears')
                     .append($('<option>').text('1').val('7'))
                     .append($('<option>').text('2').val('14'))
                     .append($('<option>').text('3').val('21'));

                  $('#pnlDogYearDialog')
                     .append($('<p>').text('Select your age:'))
                     .append(select);
               },
               4000);
         }

         function pnlDogYearDialog_OK() {
            $('#txtDogYears').val($('#ddlDogYears').val());
            $(this).dialog('close');
         }

      }

   </script>

</asp:Content>
